<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const _key = '76c16889f1d23d32bc11c6db58e3bf52' // 替换为你的 Key
const map = ref<any>(null)
const AMapRef = ref<any>(null)
const isSatellite = ref(true) // 默认显示卫星地图

onMounted(() => {
  initMap()
})

function initMap() {
  AMapLoader.load({
    key: _key,
    version: '2.0',
    plugins: ['AMap.TileLayer.Satellite', 'AMap.TileLayer.RoadNet'], // 加载卫星图和路网插件
  })
    .then((AMap) => {
      AMapRef.value = AMap
      const satelliteLayer = new AMap.TileLayer.Satellite()
      const roadNetLayer = new AMap.TileLayer.RoadNet()

      // 初始化地图（卫星图 + 路网）
      map.value = new AMap.Map('container', {
        viewMode: '3D', // 必须 3D 模式
        zoom: 7,
        center: [102.2045261, 31.9078516],
        layers: [satelliteLayer, roadNetLayer], // 同时加载两个图层
      })
    })
    .catch((err) => {
      console.error('地图加载失败:', err)
    })
}

// 切换地图类型（卫星图+路网 ↔ 普通地图）
function toggleMapType() {
  if (!map.value || !AMapRef.value) return

  isSatellite.value = !isSatellite.value

  if (isSatellite.value) {
    // 切换到卫星地图 + 路网
    map.value.setLayers([
      new AMapRef.value.TileLayer.Satellite(),
      new AMapRef.value.TileLayer.RoadNet(),
    ])
  } else {
    // 切换回普通地图
    map.value.setLayers([])
  }
}

const toAdmin = () => {
  router.push('/admin')
}

const toWelcome = () => {
  router.push('/')
}
</script>

<template>
  <!-- 将按钮放在地图容器外部 -->
  <div class="map-controls">
    <button @click="toggleMapType">
      {{ isSatellite ? '切换普通地图' : '切换卫星地图+路网' }}
    </button>
    <button @click="toAdmin" class="buttonToAdmin">后台管理</button>
    <button @click="toWelcome" class="buttonToWelcome">欢迎页面</button>
  </div>

  <!-- 地图容器保持不变 -->
  <div id="container"></div>
</template>

<style scoped>
/* 全局样式 */
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 防止滚动条 */
}

#container {
  width: 100%;
  height: 100%;
  position: absolute; /* 地图容器绝对定位 */
  top: 0;
  left: 0;
  z-index: 1; /* 地图层级设为1 */
}

/* 按钮容器样式 */
.map-controls {
  position: absolute; /* 绝对定位 */
  top: 20px;
  right: 20px;
  z-index: 2; /* 按钮层级设为2，高于地图 */
  display: flex;
  gap: 10px; /* 按钮间距 */
}

/* 按钮样式（可选） */
.map-controls button {
  padding: 8px 16px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.map-controls button:hover {
  background-color: #f5f5f5;
}
</style>

